<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>	
		<script src="./libs/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./libs/bootstrap/css/bootstrap.min.css"/>
		<style type="text/css">
			body{
				width: 100%;
				height: 700px;
				background: url(img/atm2.jpg) no-repeat center center;
				background-size: 100% 100%;
			}
			.box{
				width: 400px;
				height: 240px;
				border-radius: 30px;
				background-color: rgba(999,999,999,0.3);
			}
			.container .userinfo{
				width: 300px;
				height: 200px;
				margin: 20px auto;
				display: flex;
				flex-direction:column;			
			}
			h1{
				margin: 20px auto;
				text-align: center;
				color: silver;
			}
			.container input{
				width: 300px;
				height: 30px;
				outline:none;
				border-radius: 8px;
				border: none;
			}
			.editname{
				height: 150px;
				position:relative;
			}
			.editpwd{
				height: 150px;
				position:relative;
			}
			#btn{
				margin-top: 20px;
				background-color: #1B6D85;
				color: whitesmoke;
				width: 100px;
				margin-left: 200px;
			}
			.p1,.p2{
				font-size: 12px;
				color: red;
				position:absolute;
				left: 0px;
				top: 50px;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-default navbar-inverse">
		  <div class="container">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">迪迦凹凸曼商品列表</a>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    	      
		     
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		
		<h1>欢迎注册凹凸曼商城，只要装备买得好，哪有怪兽打不倒！</h1>
		<div  class="container box">
			<div class="userinfo">
			<div class="editname">
				用户名：<input type="text" id="username" value="" />
			<p class="p1"></p>
			</div>			
			<div class="editpwd">
			密码：<input type="password" id="userpwd" value="" />
			<p class="p2"></p>
			</div>
			<input type="button" name="" id="btn" value="注册" />
			</div>
		</div>
		
		<script type="text/javascript">
			var name = $('#username').val()
			var pwd = $('#userpwd').val()
			$('#username').focus(()=>{
				$('.editname .p1').html('用户名可由汉字、英文字母、数字组成')
			})
			$('#username').blur(()=>{
				if(name === ''){
					$('.editname .p1').html(' ')
				}
			})
			
			$('#userpwd').focus(()=>{
				$('.editpwd .p2').html('密码不小于6位数，由数字、字母、下划线组成')
			})
			$('#userpwd').blur(()=>{
				if(name === ''){
					$('.editpwd .p2').html(' ')
				}
			})
						
			$('#btn').on('click',()=>{	
				var name = $('#username').val()
				var pwd = $('#userpwd').val()				
				$.ajax({
					url:'http://localhost/aaaff/git-shop/atm-shop/register.php',
					type:'post',
					dataType:'json',
					crossDomain:true,
					data:{
						username:name,
						userpwd:pwd,
					},
					success:(resp)=>{
						console.log(resp.code)
						if(resp.code === 200){
							alert('注册成功')
							location.href='http://localhost/aaaff/git-shop/atm-list/login.html'
						}else{
							alert('注册失败，请重试！')
							location.href='http://localhost/aaaff/git-shop/atm-list/register.html'
						}
					}
				})
			
			})
		</script>
	</body>
</html>

